<template>
  <div class="all-center">
                    <div class="allback"></div>
        <img src="../assets/image/12.png" alt="" class="centerg">

            <div class="top">
                <div>
                    <p style="width:90px;">个人中心></p><p style="color:#ff6700;">{{name}}</p>
                </div>
            </div>
    <div class="aritle-page">
  <el-tabs :tab-position="tabPosition" >
<!-- 我的资产       完-->
    <el-tab-pane label="我的资产" @click="into('我的资产')">
          <div class="myjb">
             <div calss="upan-all">
                 <div class="upan-all-left">
                        <div class="upan-top">
                        <el-upload
                                class="avatar-uploader"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img :src="imageUrl?imageUrl:imgtdmiaobi" class="avatar">
                                <div class="upimg">上传头像</div>
                            </el-upload>
                        </div>
                        <div class="upan-text">
                            <div class="upan-text-one">
                                <div>注册名字：</div><div>158xxxxx608</div>
                            </div>
                                                        <div class="upan-text-all">
                                <div>真是姓名：</div><div>未认证</div>
                            </div>
                                                        <div class="upan-text-all bingdng">
                                <div>身份认证：</div><div>未绑定</div>
                                <div class="bangdinger">立即认证</div>
                            </div>
                                                        <div class="upan-text-all">
                                <div>绑定手机：</div><div>151****608</div>
                            </div>
                                                        <div class="upan-text-all">
                                <div>注册时间：</div><div>2014-01-05</div>
                            </div>
                        </div>
                <div class="upan-all-right">
                     <div class="upankball">
                         <div class="upankball-one">￥5600.54</div>
                         <p>可提现额度</p>
                     </div>
                     <div class="upankball-teshu">
                         <div class="upankball-one">￥5600.54</div>
                         <p>可提现额度</p>
                     </div>
                     <div class="upankball">
                         <div class="upankball-yi">￥5600.54</div>
                         <p>可提现额度</p>
                     </div>  
                        <div class="cliack-un">
                            <div>提现</div>
                            <div>立即转入</div>
                        </div>                   
                </div>
                 </div>
             </div>
              <div class="bjqq bjqq-one">
                   <div>名称</div>
                   <div>可用余额</div>
                   <div>冻结</div>
                   <div>总记</div>
                   <div>总存入</div>
                   <div>操作</div>
              </div>
              <div class="bjqq">
                   <div>节点本币NPC</div>
                   <div>5000.0000</div>
                   <div>5000.0000</div>
                   <div>10000.0000</div>
                   <div>30000.0000</div>
                   <div class="bjqq-all">
                        <div>转入</div>
                        <div>存入</div>
                   </div>
              </div>     
              <div class="bjqq bjqq-two">
                   <div>普银币</div>
                   <div>0.0000</div>
                   <div>0.0000</div>
                   <div>0.0000</div>
                   <div>0.0000</div>
                   <div class="bjqq-all">
                        <div>转入</div>
                        <div>存入</div>
                   </div>
              </div>  
              <p class="jinqi">近期存储</p>  
           <div class="jinqi-all">
              <div class="jinqi-one">
                 <div>存储ID</div>
                 <div>收益率</div>
                 <div>锁定期</div>
                 <div>存入数量</div>
                 <div>存入时兑率</div>
                 <div>存入时间</div>
                 <div>解冻时间</div>
                 <div>赢得总金额</div>
                 <div>状态</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>
                 </div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>    
                 </div>
                 <div>70000</div>
                 <div>存储中</div>
              </div>
               <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>
                 </div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>    
                 </div>
                 <div>70000</div>
                 <div>存储中</div>
              </div>
               <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>
                 </div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>    
                 </div>
                 <div>70000</div>
                 <div style="color:#ff6800;">已冻结</div>
              </div>
               <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>
                 </div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>    
                 </div>
                 <div>70000</div>
                 <div>存储中</div>
              </div>
           </div>
          </div>
    </el-tab-pane>
<!-- 数字资产转入    完-->
    <el-tab-pane label="数字资产转入" @click="into('数字资产转入')">
        <div class="shuzi-all">
             <div class="shuzi-one">
                 <div @click="PEB" :style="PEBPEB">PEB</div>
                 <div @click="NPC" :style="NPCNPC">NPC</div>
             </div>
             <div class="shuzi-two">
                   <div>这是你的钱包什么地址啊啊哈哈哈哈：</div>
                   <div>Llsiadasfagv65456441324646</div>
                   <div>禁止什么的补充文字补充文字补充文字</div>
                   <div>1，补充文字补充文字补充文字补充文字 <img src="../assets/image/zxc.png" alt=""></div>
                   <div>2，补充文字补充文字补充文字</div>
                   <div>
                       <p>近期转入记录</p>
                       <p>查看更多</p>
                   </div>
             </div>
        <div class="jinqi-all shuzi-two-jinqi" style="width:856px">
              <div class="jinqi-one">
                 <div>序号</div>
                 <div>转入地址</div>
                 <div>转入数量</div>
                 <div>确认数</div>
                 <div>转入时间</div>
                 <div>状态</div>
              </div>
              <div class="jinqi-one" style="background:#FFFFFF;">
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>
                 </div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>    
                 </div>
                 <div>70000</div>
                 <div>存储中</div>
              </div>
               <div class="jinqi-one" style="background:#eeeeee;">
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>
                 </div>
                 <div class="jinqi-cun">
                     <div>2017-12-24</div>
                     <div>08:12:50</div>    
                 </div>
                 <div>70000</div>
                 <div>存储中</div>
              </div>
           </div>
           <img src="../assets/image/84989hjghb.png" alt="" class="img-erweima">
        </div>
    </el-tab-pane>
    <el-tab-pane label="输入记录">角色管理</el-tab-pane>
<!-- 提现       完-->
    <el-tab-pane label="提现" @click="into('提现')">
        <div class="deposit">
             <div class="deposit-one">
                 <div>提现</div>
                 <div>提现记录</div>
             </div>
             <div class="deposit-two"><img src="../assets/image/zxc.png" alt=""><p>提示：1，补充文章补充文章补充文章。2，补充补充文章。3，补充文章补章补章补充文章。</p></div>
             <div class="deposit-over">
                  <div class="deposit-all">
                        <div class="deposit-all-one">持卡人：</div><div class="deposit-all-two">鲁斯呀</div>
                  </div>
                  <div class="deposit-all">
                        <div class="deposit-all-one">提现银行卡：</div><div class="deposit-all-two">广发银行</div>
                  </div>
                  <div class="deposit-all">
                        <div class="deposit-all-one">银行卡号：</div><div class="deposit-all-two deposit-heima">62222xxxxxxxxxx151</div>
                  </div>
                  <div class="deposit-all">
                        <div class="deposit-all-one">开户卡号：</div><div class="deposit-all-two deposit-heima">62222xxxxxxxxxx151</div>
                  </div>
                  <div class="deposit-all">
                        <div class="deposit-all-one">可以提现余额：</div><div class="deposit-all-two" style="display:flex;    align-items: center; "><p style="color:#ff6700;">5，000.00 </p>元</div>
                  </div>
                  <div class="deposit-all">
                        <div class="deposit-all-one">提现金额：</div><div class="deposit-all-two deposit-input"><input type="text"><div>全部</div></div>
                  </div>
                  <div class="deposit-all">
                        <div class="deposit-all-one">手续费：5元</div><div class="deposit-all-two"></div>
                  </div>
                  <div class="deposit-all">
                        <div class="deposit-all-one">实际到账金额：</div><div class="deposit-all-two deposit-zuihou">4454元</div>
                  </div>
                  <div class="deposit-all">
                        <div class="deposit-all-one">手机号码：</div><div class="deposit-all-two deposit-zuihou"> </div>
                  </div>
                  <div class="deposit-all">
                        <div class="deposit-all-one">验证码：</div><div class="deposit-all-two deposit-zuihou"></div> <div class="deposit-tzm">获取手机验证码</div>
                  </div>
                  <div class="deposit-all">
                       <img src="../assets/image/xxx.png" alt="" class="deposit-img"> <p>验证码输入错误</p>
                  </div>
                  <div class="deposit-all">
                     <div class="up-img-text" style="margin-left:100px;">提现</div>
                  </div>
                 
             </div>
        </div>
    </el-tab-pane>
<!-- 提现记录    完 -->
    <el-tab-pane label="提现记录" class="weileidi"  @click="into('提现记录')">
        <div class="txjl">
         <div class="txjl-one" style=" margin: 35px 0;">日期：
             <div class="txjl-y">
                 <div class="aaa">2017-11-29</div>--<div>2017-12-29</div>
             </div>
             <div class="txjl-all">最近一周</div> <div class="txjl-all" style="background: #fd6801;color:#ffffff;">最近一个月</div> <div class="txjl-all">最近三个月</div>
             <div>状态筛选</div> <div class="txjl-aa"></div><div class="txjl-all" style="background: #fd6801;color:#ffffff;">查询</div>
             </div>
           <div class="jinqi-all">
              <div class="jinqi-one" style="color:#ffffff;background:#333333;">
                 <div>存储ID</div>
                 <div>收益率</div>
                 <div>锁定期</div>
                 <div>存入数量</div>
                 <div>存入时兑率</div>
                 <div>存入时间</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
           </div>
           <div class="jinqi-all">
              <div class="jinqi-one" v-show="false">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
           </div>
           <div class="txjl-posi">
               <div class="txjl-hq" style="background:#ff9a01;">首页</div>
               <div class="txjl-center">
                    <el-pagination
                :page-size="10"
                :pager-count="10"
                layout="prev, pager, next"
                :total="1000">
                </el-pagination>             
               </div>
             <div class="txjl-hq" style="background:#666666;">尾页</div>
           </div>
        </div>
    </el-tab-pane>
<!-- 存储管理   我的存储  完-->
    <el-tab-pane label="存储管理"  @click="into('存储管理')">定时任务补偿</el-tab-pane>
    <el-tab-pane label="我的存储" class="weileidi"  @click="into('我的存储')">
        <div class="txjl">
         <div class="txjl-one" style="border-bottom:1px solid #fd6800; padding-bottom:35px; margin: 15px 0;">日期：
             <div class="txjl-y">
                 <div class="aaa">2017-11-29</div>--<div>2017-12-29</div>
             </div>
             <div class="txjl-all">最近一周</div> <div class="txjl-all" style="background: #fd6801;color:#ffffff;">最近一个月</div> <div class="txjl-all">最近三个月</div>
             <div>状态筛选</div> <div class="txjl-aa"></div><div class="txjl-all" style="background: #fd6801;color:#ffffff;">查询</div>
             </div>
           <div class="jinqi-all">
              <div class="jinqi-one">
                 <div>存储ID</div>
                 <div>收益率</div>
                 <div>锁定期</div>
                 <div>存入数量</div>
                 <div>存入时兑率</div>
                 <div>存入时间</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
           </div>
           <div class="jinqi-all">
              <div class="jinqi-one" v-show="false">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
              <div class="jinqi-one">
                 <div>NPC13007</div>
                 <div>13.81%</div>
                 <div>3个月</div>
                 <div>10000</div>
                 <div>1 : 1.5</div>
                 <div>存储中</div>
              </div>
           </div>
           <div class="txjl-posi">
               <div class="txjl-hq" style="background:#ff9a01;">首页</div>
               <div class="txjl-center">
                    <el-pagination
                :page-size="10"
                :pager-count="10"
                layout="prev, pager, next"
                :total="1000">
                </el-pagination>             
               </div>
             <div class="txjl-hq" style="background:#666666;">尾页</div>
           </div>
        </div>
    </el-tab-pane>
<!-- 账号管理 -->
    <el-tab-pane label="账号管理"  @click="into('账号管理')"></el-tab-pane>
<!-- 基本信息       完-->
    <el-tab-pane label="基本信息" class="weileidi"  @click="into('基本信息')">
        <div class="essential">
             <div class="essential-one">
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img :src="imageUrl?imageUrl:imgtdmiaobi" class="avatar">
                <div class="up-img">备注：点击头像即可进行上传</div>
            </el-upload>
             </div>
             <div class="essential-two">
                <div class="essential-two-all">
                    <div class="essential-two-name">真是姓名：</div>
                    <div class="essential-two-value">未认证</div>
                    <p>立即认证</p>
                </div>
                <div class="essential-two-all">
                    <div class="essential-two-name">身份证号：</div>
                    <div class="essential-two-value">未认证</div>
                    <p>立即认证</p>
                </div>
                <div class="essential-two-all">
                    <div class="essential-two-name">手机号码：</div>
                    <div class="essential-two-valuea">187****2561</div>
                    <p class="essential-p-img"> <img src="../assets/image/dui.png" alt="">已认证</p>
                </div>
                <div class="essential-two-all">
                    <div class="essential-two-name">性别：</div>
                    <div class="">男</div>
                    <p></p>
                </div>
                <div class="essential-two-all">
                    <div class="essential-two-name">出生日期：</div>
                    <div class="">1990年12月24号</div>
                    <p></p>
                </div>
             </div>
        </div>
    </el-tab-pane>
<!-- 身份认证       完-->
    <el-tab-pane label="身份认证"   @click="into('身份认证')">
        <div class="identity-all">
             <img src="../assets/image/upsan.png" alt="" class="identity-img-one">
             <div class="identity-bom">
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccessone"
                :before-upload="beforeAvatarUpload">
                <img :src="npone?npone:upthrss" class="identity-bom-img">
            </el-upload>
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccesstwo"
                :before-upload="beforeAvatarUpload">
                <img :src="nptwo?nptwo:uptwo" class="identity-bom-img">
            </el-upload>
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccessthrss"
                :before-upload="beforeAvatarUpload">
                <img :src="npthrss?npthrss:upone" class="identity-bom-img">
            </el-upload>
             </div>
             <div class="up-img-thrss"><img src="../assets/image/xxx.png" alt="">错误提示</div>
             <div class="up-img-text">提交</div>
             <div class="identity-readding">
                 <p>1，补充文字补字补文字补文字补字补文字补充文字补充文字</p>
                 <p>2，补充文字补文字补文字补文字补充文字</p>
                 <p>3，补充文字补充文补文字补字补充文字补充文字</p>
                 <p>4，补充文字补字文字补补充文字补充文字</p>
             </div>
     </div>

    </el-tab-pane>
<!-- 更换绑定手机号 完-->
    <el-tab-pane label="更换绑定手机号" class="weileidi"    @click="into('更换绑定手机号')">
        <div class="gneghuan-all">
            <div class="gneghuan-left gneghuan-home">您已绑定的手机号:151****8965</div>
            <div class="gneghuan-left gneghuan-san">
                <div style="color:#323232;font-size:17px;">验证码:</div>
                <input type="text" style="margin:0 14px;border-radius:10px;">
              <div @click="again()" class="gneghuan-yzm">获取手机验证码</div>
              <div style="margin:0 12px;color:#fe9a33;">{{time}}s</div>
                <div style="color:#afafaf;">15分钟有效</div>
            </div>
            <div class="gneghuan-left" style="color:#afafaf;">验证码已发送,请注意查看检查,正确输入后进入下一步.</div>
            <div class="gneghuan-next">下一步</div>
        </div>
    </el-tab-pane>
<!-- 密码管理      完-->
    <el-tab-pane label="密码管理" class="weileidi"  @click="into('密码管理')">
        <div class="plass-all">
             <div class="plass-one  plass-xuan">
                  <p>注册账号：</p>
                  <div>158xxxxx608</div>
             </div>
             <div class="plass-one">
                  <p>原密码：</p>
                  <input type="text">
             </div>
             <div class="plass-one">
                  <p>新密码：</p>
                  <input type="text">
             </div>
             <div class="plass-one">
                  <p>再次输入密码：</p>
                  <input type="text">
             </div>
             <div class="pass-butom">立即修改</div>
        </div>

    </el-tab-pane>
<!-- 消息中心       完-->
    <el-tab-pane label="消息中心" class="weileidi"   @click="into('消息中心')">
       <div class="email-all txjl"  @click="into('消息中心')">
          <div class="email">消息中心</div>
          <div class="email-one" style="   border-bottom:1px solid #ccc;  padding-bottom:12px;   margin-top: 12px;">
              <div class="email-one-"></div>
              <div class="email-one--">删除</div>
          </div>
          <div v-for="(id,index) in 5" :key="index">
          <div  class="email-one" style="height:53px;background:#f6f6f6;">
              <div class="email-one-"></div>
              <div style="width:146px;margin-left:30px;">提现</div>
              <div style="width:538px;">您与杀杀杀大师</div>
              <div>2017-12-07</div>
          </div>
          <div  class="email-one" style="height:53px;">
              <div class="email-one-"></div>
              <div style="width:146px;margin-left:30px;">提现</div>
              <div style="width:538px;">您与杀杀杀大师</div>
              <div>2017-12-07</div>
          </div>

          </div>
           <div class="txjl-posi">
               <div class="txjl-hq" style="background:#ff9a01;">首页</div>
               <div class="txjl-center">
                    <el-pagination
                :page-size="10"
                :pager-count="15"
                layout="prev, pager, next"
                :total="1000">
                </el-pagination>             
               </div>
             <div class="txjl-hq" style="background:#666666;">尾页</div>
           </div>
       </div>

    </el-tab-pane>
  </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data(){
      return{
           tabPosition: 'left',
           imageUrl: '',
           imgtdmiaobi:require("../assets/image/miapmi.png"),
           upone:require("../assets/image/up1.png"),
           uptwo:require("../assets/image/up2.png"),
           upthrss:require("../assets/image/up3.png"),
           npone:"",
           nptwo:"",
           npthrss:"",
            titles:"修改登录手机号",
            obtain:true,
            time:59    ,
            PEBPEB:""  ,
            NPCNPC:""  ,
            name:""   
      }
  },
  methods:{
      into(val){
          this.name = val
      },
      PEB(){
          this.NPCNPC = ''
          this.PEBPEB = 'background: #ff9a00; color: #FFFFFF; height: 46px;'
      },
      NPC(){
          this.PEBPEB = ''
          this.NPCNPC = 'background: #ff9a00; color: #FFFFFF; height: 46px;'          
      },
             again(){
                 if(this.obtain){
           this.obtain=false;
            let that=this;
            let timer=setInterval(function(){
                that.time--;
                if(that.time===0){
                    clearInterval(timer)
                    that.obtain=true;
                    that.time=59;    
                }
            },1000)  
                 }else{
                     alter('操作频繁')
                 }
        }  ,
      handleAvatarSuccessone(res, file) {
        this.npone = URL.createObjectURL(file.raw);
      },
      handleAvatarSuccesstwo(res, file) {
        this.nptwo = URL.createObjectURL(file.raw);
      },
      handleAvatarSuccessthrss(res, file) {
        this.npthrss = URL.createObjectURL(file.raw);
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
  },
  mounted(){
   this.PEB();
   //this.into('消息中心');
  }
}

</script>
<style lang="scss" scoped>
.email-all{
    margin-right: 30px;
   .email{
      font-weight: bold;
      margin-top: 50px;
      padding-bottom: 10px;
      border-bottom: 1px solid black;
    }
   .email-one{
         display: flex;
         align-items: center;
         .email-one-{
              width: 14px;
              height: 14px;
              border: 1px solid #CCC;
              margin:0 20px; 
          }
           .email-one--{
              width: 75px;
              height: 30px;
              background: #fd6801;color:#ffffff; 
              font-size: 14px;
              text-align: center;
              line-height: 30px;
              border-radius:5px; 
           }
     }
}
.txjl{
    margin-right:30px; 
    .txjl-posi{
       display: flex;
       align-items: center;
       justify-content: center;
       .txjl-center{
   margin-top: 30px;        
       }
        .txjl-hq{
              width: 90px;
             height:35px;
             background: #f5f5f5;
             text-align: center;
             line-height: 35px;
             margin: 0 5px;   
             color: #ffffff;
             margin-top: 30px;        
        }
    }
    .txjl-one{
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: space-evenly;
        .txjl-aa{
             width: 90px;
             height:35px;
             background: #f5f5f5;
             text-align: center;
             line-height: 35px;
             margin: 0 5px;
        }
       .txjl-y{
        display: flex;
        align-items: center; 
         div{
             width:90px;
             height:35px;
             background: #f5f5f5;
             text-align: center;
             line-height: 35px;
             margin: 0 5px;
         }
        }
       .txjl-all{
             width: 90px;
             height:35px;
             border-radius: 5px; 
             text-align: center;
             line-height: 35px;
             border: 1px solid #fd6801;
             color: #fd6801;          
       }
    }
}
.deposit{
    .deposit-over{
        margin-top:35px; 
        .deposit-all{
            .deposit-img{
                width: 15px;
                height: 15px;
                margin-right:10px; 
            }
            p{
                color:#ff6700;
                font-size: 12px;
            }
            .deposit-tzm{
                width: 118px;margin-left: 10px;
                border-radius:5px; 
                height: 34px;
                font-size: 14px;
                color: #FFFFFF;
                background: #fe9a33;
                text-align: center;
                line-height: 34px;

            }
            .deposit-input{
                display: flex;
                div{
                     height: 40px;
                     width: 50px;
                     border-radius:0 5px 5px 0;
                     background: #999999;
                     color: #FFFFFF;
                     text-align: center;
                     line-height: 40px; 
                }
                input{
                width:153px;
                height: 40px;
                background: #f6f6f6;
                color: transparent;
                text-shadow:0 0 0 #323232;
                outline: none; 
                border: 0px solid transparent;
                }

            }
            .deposit-zuihou{
                padding-left: 17px;
                width: 150px;
                height:40px;
                background: #f6f6f6;
                color: #999999;
                border-radius:5px; 
                line-height: 40px;
            }
            .deposit-heima{
                padding: 16px 70px 16px 17px;
                background: #f6f6f6;
                color: #999999;
                border-radius:5px; 
            }
            margin: 15px 0 15px 221px;
             display: flex;
             align-items: center;
            .deposit-all-one{
                width: 117px;
            }
        }
    }
    .deposit-two{
        font-size: 15px;
        display: flex;
        align-items: center;
        color: #5a5a5a;
        height: 50px;
        background: #f6f6f6;
        text-shadow:black;
        margin-right: 30px;
        img{
            width: 25px;
            height: 25px;
            margin: 0 20px;
        }
    }
    .deposit-one{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 15px 0;
        div:nth-of-type(1){
            font-size: 20px;
            font-weight: bold;
        }
        div:nth-of-type(2){
            margin-right: 30px;
            width: 90px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            background: #ff6700;
            color: #FFFFFF;
            border-radius:10px;
            font-size: 15px; 
        }
    }
}
.shuzi-all{
    position: relative;
    .img-erweima{
        position: absolute;
        top: 90px;
        right: 62px;
        width: 115px;
        height:115px;
        border: 1px solid black;
        background: #ffffff;
        border-radius:5px; 
        padding:10px;
    }
    .shuzi-two-jinqi{
    position: absolute;
    bottom: 55px;
    left: 20px;
    }
    .shuzi-two{
        div:nth-of-type(6){
            margin: 58px 0 0 40px;
            width: 838px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
             p:nth-of-type(1){
                font-size: 20px;
                font-weight: bold;
             }
              p:nth-of-type(2){
                  width: 84px;
                  height: 28px;
                  border-radius:30px;
                  background: #FFFFFF;
                  color: #999999;
                  font-size: 10px; 
                  text-align: center;
                  line-height: 28px;
                  margin-right: 10px
              }
        }
        color: #666666;
        width: 894px;
        height:600px;
        background: #f6f6f6;
        border-radius:5px; 
        div:nth-of-type(1){
            padding: 42px 0 20px 62px;
        }
         div:nth-of-type(2){
            width: 502px;
            height: 73px;
            background: #666666;
            color:#ffff99;
            font-size: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius:5px; 
            margin:0 0 64px 53px; 
         }
         div:nth-of-type(3), div:nth-of-type(4), div:nth-of-type(5){
             margin-left: 67px;
             font-size: 15px;
         }
         div:nth-of-type(4){
             margin: 12px 0 12px 67px;
             position: relative;
         img{
             position: absolute;
             width: 27px;
             height: 27px;
             left: -38px;
             top: -28px;
         }
         } 

    }
   .shuzi-one{
       margin-top: 55px;
       display: flex;
       align-items:flex-end;
       div{
           width: 110px;
           height: 42px;
           background: #ffeccc;
           display: flex;
           align-items: center;
           justify-content: center;
           color: #975e00;
           border-radius:5px 5px 0 0; 
       }
       div:nth-of-type(1){
           margin:0px 2px 0 20px; 
       }
   }
    
}
//全部的按钮同样样式
.up-img-text{
    width: 165px;
    height:45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #ff6700;
    border-radius:5px; 
}
.identity-all{
    .identity-readding{
        width: 670px;
        margin-top:104px; 
        p{
            margin: 10px 0;
            font-size: 15px;
            color: #989898;
        }
    }
    .up-img-thrss{
    font-size: 11px;
    color: #ff6700;
    display: flex;
    align-items: center;
    img{
        width: 12px;
        height: 12px;
        margin:26px 5px 26px -5px;
    }
}
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    .identity-img-one{
        width: 670px;
        height: 125px;
        margin: 20px 0 75px 0;
    }
    .identity-bom{
        .identity-bom-img{
            width: 160px;
            height: 160px;
        }
        width: 670px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
.plass-all{
  width: 467px;
  margin:  200px auto;
  .pass-butom{
      color: #ffffff;
      width: 170px;
      height: 45px;
      background: #ff6700;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      margin: 90px auto;
  }
    .plass-one{
        margin:10px 0;
        display: flex;
        align-items: center;
        p{
            width: 137px;
            text-align:right;
        }
        input{
            width: 260px;
            height: 41px;
            outline: none;
            color: transparent;
            text-shadow:0 0 0 #323232;
            border:1px solid transparent;
            background: #f6f6f6;
            border-radius:5px; 
        }
    }
    .plass-xuan{
    margin-bottom: 20px;
}
}

.essential{
    .essential-two{
         .essential-two-all{
             .essential-p-img{
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 color:#cccccc;
                 img{
                     width: 20px;
                     height:20px;
                     margin-right: 2px;
                 }
             }
                 margin: 20px 0;
             display: flex;
             align-items: center;
              font-size: 17px;
             .essential-two-name{
                 color: #323232;
             }
             .essential-two-valuea{
                   width: 134px;
             }
             .essential-two-value{
                 color: #cccccc;
                 width: 134px;
             }
             p{
                 margin-left: 133px;
                 color: #ff6700;
             }
         }
    }
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  .essential-one{
      margin-top: 80px;
      .up-img{
          margin:25px 0 80px 0;
          font-size: 10px;
          color: #ff6700;
      }
  }

}
.gneghuan-all{
    .gneghuan-next{
     width: 168px;
     height: 41px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #FFFFFF;
     background: #ff6700;
      margin:147px 0 0 352px;
      cursor:pointer;
    }
    font-size: 15px;
    .gneghuan-yzm{
        display: flex;
        cursor:pointer;
        align-items: center;
        justify-content: center;
        padding: 1px 5px;
        width: 116px;
        height: 34px;
        background: #fe9a33;
        border-radius:10px;
        color: #ffffff;
    }
    .gneghuan-san{
        margin: 50px 0;
    }
    .gneghuan-home{
        font-size: 20px;
        font-weight: bold;
    }
    display: flex;
    flex-direction: column;
    margin-top: 163px;
    .gneghuan-left{
        margin-left: 251px;
    }
    div{
        display: flex;
        align-items: center;
        input{
            width: 143px;
            height: 42px;
            padding: 0 10px;
            background: #f6f6f6;
            outline: none;
            border: 0px solid transparent;
            color: transparent;
            text-shadow: 0 0 0 #000;           
        }
    }
}
.jinqi-all{
    .jinqi-one:nth-of-type(1){
        background: #ff9a00;
          color:#fff3e6;
          height: 42px;
    }
    .jinqi-one:nth-of-type(3){
       background: #f6f6f6;
       color: #656565;
       height:60px;
    }
        .jinqi-one:nth-of-type(2){
       color: #656565;
       height:60px;
    }
        .jinqi-one:nth-of-type(4){
       color: #656565;
       height:60px;
    }
        .jinqi-one:nth-of-type(5){
       background: #f6f6f6;
       color: #656565;
       height:60px;
    }
    .jinqi-one{
        display: flex;
        justify-content: space-around;
        .jinqi-cun{
        display: flex;
        flex-direction: column;
        font-size: 10px;
        div{
            height: 17px;
        }
        }
        div{
            width: 100px;
            height: 100%;
            width: 100px;
           display: flex;
           align-items: center;
           justify-content: center;
        }
    }
}
.jinqi{
    margin:44px 0 18px 0;
    font-size: 19px;
     font-weight: bold;
}
    .myjb{
        .bjqq-one{
            background: #dddddd;
            height: 41px;
            font-size: 15px;
        }
        .bjqq-two{
            height: 60px;
            background: #f6f6f6;
        }
        .bjqq{
            .bjqq-all{
                display: flex;
                justify-content: center;
                align-items: center;
                div{
                    width: 56px;
                    height: 26px;
                    text-align: center;
                    line-height: 26px;
                    font-size: 16px;
                    color: #fffffd;
                }
                div:nth-of-type(1){
                    background: #ff9900;
                    margin-right: 7px;
                }
                div:nth-of-type(2){
                    background: #ff6700;
                }
            }
            margin-top: 20px;
            div{
                width: 130px;
                text-align: center;
            }
        display: flex;
        flex: 1;
        justify-content: space-around;
        align-items: center;
        width: 872px;
        }
        margin-top: 40px;
        .upan-all-left{
            border-right:1px solid #f1f2f3; 
            display: flex;
            .upan-all-right{
                position: relative;
                font-size: 17px;
                display: flex;
                .cliack-un{
                    position: absolute;
                    right: 35px;
                   bottom: 10px;
                    display: flex;
                    div{
                        width: 110px;
                        height: 40px;
                        text-align: center;
                        line-height: 40px;
                        font-size: 14px;
                        color: #ffffff;
                    }
                    div:nth-of-type(1){
                        background: #ff9a00;
                        margin-right: 20px;
                    }
                     div:nth-of-type(2){
                         background: #ff6700;
                     }
                }
                .upankball-teshu{
                    position: relative;
                }
                .upankball-teshu::after{
                            content: "";
                            position: absolute;
                            left: 0px;
                            bottom: 0px;
                            width: 100%;
                            height: 100%;
                            border-left:1px solid #f1f2f3; 
                            border-right:1px solid #f1f2f3; 
                            transform: scale(1,0.9);
                }
                .upankball,.upankball-teshu{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 153px;
                    height: 58px;
                   .upankball-one{
                        color:#fe6900;
                        margin-bottom: 25px;
                    }
                    .upankball-yi{
                          color:#cccccc; 
                          margin-bottom: 25px;
                    }
                    p{
                        color: #7f7f7f;
                        font-size: 15px;
                    }
                }
            }
            .upan-text{
                .bingdng{
                    position: relative;
             .bangdinger{
                    position: absolute;
                    top: -5px;
                    right: 22px;
                    height: 25px;
                    width: 64px;
                    border: 1px solid #ff9a00;
                    text-align: center;
                    line-height: 25px;
                    color:#ff9a00;
                    font-size: 13px;
                }
                }

                width: 225px;
                border-right:1px solid #f1f2f3; 
                margin-left:59px; 
                font-size: 16px;
                color: #999999;
                .upan-text-one{
                    display: flex;
                    margin-bottom: 20px;
                    div:nth-child(1){
                        color: #5e5e5e;
                    }
                }
                 .upan-text-all{
                       display: flex;
                       margin: 20px 0;
            div:nth-child(1){
                        color: #5e5e5e;
                    }
                 }
            }
                .upan-top{
                    margin-left: 20px;
                    .upimg{
             margin-left:20px; 
             margin-top:14px;
             text-align:center;
             width:72px;
             height:28px;
             border: 1px solid #ff9a00;
             line-height:28px;
             border-radius:30px;
             color: #ff9a00;
             font-size: 14px;
        }
        }
        }

}
 .avatar{
        width: 120px;
        height: 120px;
  }
/deep/.aritle-page::after{
        content: "";
    position: absolute;
    left: 238px;
    bottom: 0px;
    width: 22px;
    height: 100%;
    background-color: #f1f2f3;
    transform: scale(1,1);
    z-index: 111;
}
/deep/.aritle-page{
    position: relative;
    .el-tab-pane{
        margin: 0px 0 0 44px;
        height: 100%;
    }
     #tab-4,#tab-6,#tab-11{
         position: relative;
     }
      #tab-11::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100%;
    height: 1%;
    background-color: #ccc;
    transform: scale(0.8,0.5);
    z-index: 111;
    }
     #tab-6::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100%;
    height: 1%;
    background-color: #ccc;
    transform: scale(0.8,0.5);
    z-index: 111;
    }
    #tab-4::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100%;
    height: 1%;
    background-color: #ccc;
    transform: scale(0.8,0.5);
    z-index: 111;
    }
.el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 1;
}

    .el-tabs__nav{
      margin-right: 2px;
      
    }
    background: #ffffff;
    //  font-size: 12px;
     #tab-1,#tab-2,#tab-3,#tab-4,#tab-6,#tab-8,#tab-9,#tab-10,#tab-11{
        padding-left:90px; 
     }
     #tab-5,#tab-7,#tab-12{
         margin-top: 30px;
     }
    #tab-0,#tab-5,#tab-7,#tab-12{
        font-size: 20px;
        font-weight: bold;
        padding-left: 70px;
    }
    #tab-12{

    }
    #tab-4,#tab-6,#tab-11{
        margin-bottom:30px; 
   //    border-bottom: 1px solid #ccc;
    }
     margin: 20px auto;
     width: 1200px;
     .el-tabs__item{
         background: #FFFFFF;
         width: 237px;
         height: 52px;
         text-align: left;
        // padding-left: 70px;
         line-height: 52px;
     }
    .is-active{
    color:#ffffff;
    background: #ff6700;
}
.el-tabs__active-bar{
   background-color:transparent;
}
}

.allback{
    background: #f3f3f3;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -100;
}
.centerg{
    height: 200px;
    width: 100%;
}
.top{
    display: flex;
    align-items: center;
    justify-content: center;
    div{
        width: 1200px;
        height: 100%;
    display: flex;
    align-items: center;
        margin-left: 37px;
    }
    width: 100%;
    height: 62px;
    background: #FFFFFF;
}
</style>
